<template>
  <div id="formTemplate">
    <el-form :model="formData" :rules="formRules" :label-width="labelWidth || 'auto'" class="demo-ruleForm" ref="form">
      <el-row>
        <el-col v-for="(column, index) in formColumn" :key="index" :span="column.span ? column.span : 24">
          <el-form-item :label="column.label" :prop="column.name">
            <!-- select 选择 -->
            <el-select v-if="column.type == 'select'" v-model="formData[column.name]" clearable filterable placeholder="请选择" :disabled="column.disabled || false" @change="column.handleChange ? column.handleChange(formData) : ''">
              <el-option v-for="item in column.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <!-- select 选择-->
            <!-- textarea 文本-->
            <el-input v-else-if="column.type == 'textarea'" :type="column.type" v-model="formData[column.name]" :maxLength="column.maxLength ? column.maxLength : 100"></el-input>
            <!-- textarea 文本-->
            <!-- radio 单选-->
            <el-radio-group v-else-if="column.type == 'radio'" v-model="formData[column.name]">
              <el-radio v-for="item in column.options" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
            <!-- radio 单选-->
            <!-- view 组件视图-->
            <div v-else-if="column.type == 'view'">
              <!-- vue bug  初始给一个id容器，但在容器上也放一个同样的id容器，解决重载丢失问题-->
              <div :id="column.name"></div>
            </div>
            <!-- view 组件视图-->
            <!-- label -->
            <div v-else-if="column.type == 'label'">
              <!-- vue bug  初始给一个id容器，但在容器上也放一个同样的id容器，解决重载丢失问题-->
              <div class="example" v-html="column.content"></div>
            </div>
            <!-- label-->
            <!-- 数字 输入框-->
            <el-input-number v-else-if="column.type == 'number'" v-model="formData[column.name]" :max="column.max ? column.max : Infinity"></el-input-number>
            <!-- input 输入框-->
            <!-- input 输入框-->
            <el-input v-else v-model="formData[column.name]" :maxLength="column.maxLength ? column.maxLength : 100"></el-input>
            <!-- input 输入框-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item v-if="formButtons && formButtons.length > 0">
        <znxd-button-list :buttons="formButtons" :initData="formData"></znxd-button-list>
      </el-form-item>
      <!-- <el-form-item v-else>
        <el-button type="primary" @click="onSave">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>-->
    </el-form>
  </div>
</template>
<script>
import Vue from "vue";
// import ButtonList from "../button/buttonList.vue";
export default {
  components: {
    // ButtonList
  },
  data() {
    return {
      formData: {}
    };
  },
  props: {
    /* formColumn 自定义表单项 支持  input、select、textarea、radio、view（component对象）
    示例：
     this.formColumn = [
        {
          name: "datasourceName",
          label: "数据源名称",
          type: "input",
          options: [],
          span:24,
          maxLength:100
        },
        {
          name: "datasource",
          label: "数据源类型",
          type: "select",
          options: this.typeOptions
        },
        {
          name: "comments",
          label: "数据源描述",
          type: "textarea",
          maxLength:100
        },
        {
          name: "jdbcUrl",
          label: "JDBC URL",
          type: "input"
        },
        {
          name: "jdbcUsername",
          label: "用户名",
          type: "input"
        },
        {
          name: "jdbcPassword",
          label: "密码",
          type: "input"
        },
        {
          name: "status",
          label: "是否启用",
          type: "radio",
          options: this.statusOptions
        },
        {
          name: "available",
          label: "测试",
          type: "view",
          template: dbLink
        }
      ];
    */
    formColumn: Array,
    formRules: Object,
    initData: Object,
    formButtons: Array, // 按钮配置参考按钮组件配置规则
    // visible: Boolean // 用于重置表单改为弹框组件重载之后弃用
    value: Object,
    labelWidth: String
  },
  watch: {
    // visible(val) {
    //   if (!val) {
    //     this.formData = {};
    //     this.$refs.form.resetFields();
    //   }
    // },
    initData: {
      deep: true,
      handler: function (val) {
        this.formData = Object.assign({}, val);
        this.$refs.form.resetFields();
      }
    },
    formData: {
      deep: true,
      handler: function (val) {
        this.$emit("input", val);
      }
    }
    // formColumn: {
    //   deep: true,
    //   handler: function (val) {
    //     // console.log("formColumn", val);
    //     // 设置延时机制，页面构建完成之后，触发组件挂载操作
    //     // setTimeout(() => {
    //     //   this.initComponent();
    //     // }, 2000);
    //   }
    // }
    // value: {
    //   deep: true,
    //   handler: function (val) {
    //     // this.$emit("input", val);
    //     console.log("value", val);
    //   }
    // }
  },
  methods: {
    // onSave() {
    //   this.$refs.form.validate((isWell) => {
    //     if (isWell) {
    //       this.$emit("handeSave", this.formData);
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    onCancel() {
      // this.$emit("handelCancel");
      // this.formData = {};
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
    },
    // 校验数据
    validateForm() {
      let flag = null;
      this.$refs.form.validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag;
    },
    // 挂载组件
    component(column) {
      let _this = this;
      // console.log("component", _this.formData.id);
      const Counter = Vue.extend(column.template);
      console.log("Counter", Counter);
      const instance = new Counter({
        propsData: {
          name: column.name, // 绑定参数
          label: column.label, // 描述
          initData: _this.formData, // 传入表单
          // 设置回调函数
          handleSetModel: (val, name) => {
            _this.handleSetModel(val, name);
          }
        }
      });
      console.log("instance", instance);
      // console.log("instance _this.formData", _this.formData.id);
      instance.$mount("#" + column.name);
    },
    // 组件赋值
    handleSetModel(val, name) {
      this.formData[name] = val;
    },
    // 挂载全部组件
    initComponent() {
      this.formColumn.map((column) => {
        if (column.type === "view") {
          this.component(column);
        }
      });
    }
  },
  mounted() {
    if (this.initData) {
      this.formData = Object.assign({}, this.initData);
    } else {
      this.formData = Object.assign({}, this.value);
    }
    this.initComponent();
  },
  updated() {
    // this.initComponent();
  }
};
</script>
<style lang="scss" scoped>
.example {
  line-height: 1.8rem;
}
</style>
